.home-header{
	height: 300px;
	padding: 60px 30px;
	
	text-align: center;
	color:  #263238;
	
	background: url('../image/home/header.jpg');
	background-size: cover;
	
	.company-name{
		margin-top: 60px;
		margin-bottom: 30px;
		font-size: 30px;
		line-height: 40px;
	}
	.company-info{
		>span{
			margin-right: 30px;
		}
	}
}

.home-content{
	padding: 30px;
	.content-col{
		height: 100%;
		.panel-container{
			height: 100%;
			padding-bottom: 30px;
		}
		.panel-title{
			color: #37474F;
		}
		.panel-body{
			padding-top: 0; 
			padding-bottom: 0; 
		}
	}
}


.widget{
	height: 25%;
	padding-bottom: 30px;
	
	.widget-row{
		height: 100%;
		
		@include clearfix;
		
		color: #fff;
		font-size: 24px;
	}
	
	.widget-content{
		height: 100px; 
		padding-left:5px;
		padding-right: 5px;
		
		line-height: 100px;
		text-align: center;
		
		border-bottom-left-radius: 3px;
		border-top-left-radius: 3px;
		
		small{
			font-size: 12px;
		}
	}
	.widget-title{
		height: 100px; 
		padding-left:5px;
		padding-right: 5px;
		
		line-height: 100px;
		text-align: center;		
		
		border-bottom-right-radius: 3px;
		border-top-right-radius: 3px;
	}
	
	&.widget-primary{
		.widget-content{
			background: darken($brand-primary, 5%);
		}
		.widget-title{
			background: $brand-primary;
		}
	}
   &.widget-success{
		.widget-content{
			background: darken($brand-success, 5%);
		}
		.widget-title{
			background: $brand-success;
		}
	}
	&.widget-info{
		.widget-content{
			background: darken($brand-info, 5%);
		}
		.widget-title{
			background: $brand-info;
		}
	}
	&.widget-warning{
		.widget-content{
			background: darken($brand-warning, 5%);
		}
		.widget-title{
			background: $brand-warning;
		}
	}
}

.trend{
	position: relative;
	width: 30px;
	height: 300px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
	
	.trend-root{
		margin: 0 auto;
		height: 15px;
		width: 15px;
		
		background: $brand-default;
		border-radius: 15px;
		
		&:after{
			content: '';
			display: block;
			margin: 0 auto;
			width: 1px;
			height: 300px;
			background: $brand-default;
		}
	}
	
	.trend-node{
		position: relative; 
		margin: 0 auto;
		height: 30px;
		margin-top: 30px;
		margin-bottom: 30px;
		
		.node-text{
			position: absolute;
			width: 120px;
			
			&.node-text-right{
				top: 5px;
				left: 40px;
			}
		
			&.node-text-left{
				top: 5px;
				right: 40px;
				text-align: right;
			}
		}	
		
	}
}

.chart{
	position: relative;
	.order-today{
		height: 360px;
	}
	.order-avg{
		position: absolute;
		top: 30px;
		right: 40px;
		
		height: 160px;
		width: 240px;
	}
	.order-avg{
		text-align: right;
	}
	
	.avg-bar{
		margin-bottom: 5px;
	}
	
	.bar{
		display: inline-block;
		width: 90px;
		padding: 1px 5px;
		
		color: #fff;
		font-size: 10px;
		
		background: $brand-primary;
		border-radius: 3px;
		
		&.bar-wide{
			background: $brand-success;
			width: 120px;
		}
	}
	
	.tag-cloud{
		height: 180px;
	}
}

.panel-notice{
	ul{
		padding-left: 0;
		>li>a{
			width: 100%;
			color: #77838F;
			
			&:hover{
				color: #37474F;
			}
		}
		>li{
			margin-bottom: 5px;
		}
	}
	
	.notice-title,
	.notice-date{
		display: inline-block;
		width: 100%;
		vertical-align: middle;
	}
	.notice-title{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.notice-date{
		font-size: 10px;
		color: #dddddd;
	}
}

.panel-news{
	.bx-viewport{
		//padding-bottom: 15px;
		//padding-top: 15px;
	}
	.news{
		position: relative;
		text-align: center;
		overflow: hidden;
		//box-shadow: 1px 1px 1px 1px #bbb;
		//border: 1px solid #dddddd;dddddd
		img{
			width: 260px;
		}
		.news-title{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 40px;
			line-height: 40px;
			text-align: left;
			color: #f4f4f4;
			background: rgba(0,0,0,.5);
			padding: 0 10px;

			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
}

.panel-channel{
	.panel-body{
		padding: 80px;
        margin-top: 60px;
	}
	.channel-block{
		padding-top: 15px;
		padding-bottom: 15px;

		border: 1px solid $brand-default;
		border-radius: 3px;
		text-align: center;
		cursor: pointer;
		img{
			width: 40%;
		}

		&.waiting{
			pointer-events: none;
		}
	}
}

.tag-cloud{
	padding: 0 20px;
	.tag{
		display: inline-block;
		padding: 10px;
	}
}
